<template>
  <image
    :x="value.x1"
    :y="value.y1"
    :width="value.w1"
    :height="value.h1"
    :id="lid"
    style="
      fill: rgb(255, 255, 255);
      filter: grayscale(100);
      stroke-width: 2;
      stroke: rgb(50, 50, 50);
    "
    @click.stop="value.click(lid)"
    :href="value.imgValue"
    v-if="value.imgValue"
  />
  <rect
    :x="value.x1"
    :y="value.y1"
    :width="value.w1"
    :height="value.h1"
    :id="lid"
    style="
      fill: rgb(255, 255, 255);
      stroke-width: 2;
      stroke: rgb(50, 50, 50);
      cursor: pointer;
    "
    v-else
    @dblclick.stop="importImg()"
    @click="value.click(lid)"
  >
  </rect>
</template>
<script>
export default {
  props: {
    lid: null,
    value: {
      h1: 0,
      w1: 0,
      x1: 0,
      y1: 0,
      imgValue: null,
    },
  },
  mounted() {},
  created() {
    this.$props.value.imgValue = this.$props.value.localityImg;
    console.log(this.$props.value);
  },

  methods: {
    importImg() {
      var that = this;
      var input = document.createElement("input");
      input.type = "file";
      input.click();
      input.onchange = (e) => {
        if (input.files.length > 0) {
          var file = input.files[0];
          if (
            file.type == "image/gif" ||
            file.type == "image/png" ||
            file.type == "image/jpg" ||
            file.type == "image/jpeg"
          ) {
            that.blobToDataURL(file);
          } else {
            alert("请上传类型为图片的文件！");
            return;
          }
        }
      };
    },
    /**
     * File转base64
     */
    blobToDataURL(file) {
      var that = this;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        that.value.imgValue = e.target.result;
        return e.target.result;
      };
    },
  },
};
</script>
